<template>
	<div class="container"  ref="container">
		<div class="list">
			<div class="Hotcities">
				<div class="box1">
					热门城市
				</div>
				<div class="box2">
					<ul>
						<li v-for="val in hotCities" :key="val.id"  @click="changCityName(val.name)">{{val.name}}</li>
					</ul>
				</div>
			
			</div>
			<div class="Sort">
				<div class="box1">
					字母排序
				</div>
				<div class="box2">
					<ul>
						<li v-for="(item,key) in cities" :key="item.id"  @click="changeSotor(key)"  >{{key}}</li>
					</ul>
				</div>
			</div>
			
			<!--list-->
			<div class='list'>
				<div v-for="(item,key) in cities" :key="item.id" :ref="key">
					<div class='list-title'>{{key}}</div>
					<ul class='list-msg'>
						<li class='list-item' v-for="val in item"  :key="val.id">
							{{val.name}}
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import BScroll from 'better-scroll'
	import {mapMutations} from "vuex"
	
	export default{
		name:"Hotcities",
		props:["hotCities","cities"],
		data (){
			return {
				scllor:""
			}
		},
		mounted() {
			let container=this.$refs.container;
			this.scllor = new BScroll(container);
		},
		methods:{
			changeSotor:function(keyName){
				// console.log(keyName)
				// console.log(this.$refs[keyName][0])   
				this.scllor.scrollToElement(this.$refs[keyName][0],700)
			},
			changCityName:function(cityName){
				// console.log(cityName)
				this.changName(cityName);
				this.$router.push("/")
			},
			...mapMutations(["changName"])
		}
	}
</script>

<style scoped="scoped">
	.container{
		position: absolute;
		left: 0rem;
		right: 0rem;
		bottom: 0rem;
		top: 3.75rem;
		overflow: hidden;
	}
	
	.Hotcities .box1 {
		font-size: 0.87rem;
		padding: 0.62rem 0;
		padding-left: 0.62rem;
		background-color: #F5F5F5;
	}

	.Hotcities .box2 ul {
		width: 100%;
		overflow: hidden;
	}

	.Hotcities .box2 ul li {
		text-align: center;
		float: left;
		height: 2.8rem;
		line-height: 2.8rem;
		width: calc(100%/3);
		box-sizing: border-box;
		border-bottom: .02rem solid #ddd;
		border-right: .02rem solid #ddd;
	}

	.Hotcities .box2 ul li:nth-child(3),
	.Hotcities .box2 ul li:nth-child(6),
	.Hotcities .box2 ul li:nth-child(9),
	.Hotcities .box2 ul li:nth-child(12) {
		border-right: none;
	}

	.Hotcities .box2 ul li:nth-child(10),
	.Hotcities .box2 ul li:nth-child(11),
	.Hotcities .box2 ul li:nth-child(12) {
		border-bottom: none;
	}

	.Sort .box1 {
		font-size: 0.87rem;
		padding: 0.62rem 0;
		padding-left: 0.62rem;
		background-color: #F5F5F5;
	}

	.Sort .box2 ul {
		padding: 0.5rem 0;
		clear: both;
		overflow: hidden;
	}

	.Sort .box2 ul li {
		float: left;
		width: calc(100%/6);
		box-sizing: border-box;
		text-align: center;
		height: 2.8rem;
		line-height: 2.8rem;
	}
	.Solist .box .box1{
		font-size: 0.87rem;
		padding: 0.62rem 0;
		padding-left: 0.62rem;
		background-color: #F5F5F5;
	}
	.Solist .box .box2 ul{
		width: 100%;
		clear: both;
		overflow: hidden; 
		
		
	}
	
	.Solist .box .box2 ul li{
		float: left;
		width: calc(100%/4);
		text-align: center;
		height: 2.8rem;
		line-height:2.8rem;
		border-bottom: .02rem solid #ddd;
		border-right: .02rem solid #ddd;
		box-sizing: border-box;
	}
	
	
	.list-title{
		font-size:.24rem;
		color:#212121;
		padding:0.75rem 1.125rem;
		background-color: #F5F5F5;
	}
	.list-msg{
		position: relative;
		background: #fff;
		overflow: hidden;
	}
	.list-msg:before{
		content: " ";
		position: absolute;
		left:25%;
		width:25%;
		height: 100%;
		border-left:.02rem solid #ddd;
		border-right:.02rem solid #ddd;
	}
	.list-msg:after{
		content: " ";
		position: absolute;
		left:75%;
		width:0%;
		height: 100%;
		border-left:.02rem solid #ddd;
	}
	.list-item{
		position:relative;
		width:25%;
		font-size:0.875rem;
		text-align: center;
		line-height: 2.8125rem;
		float:left;
		border-bottom:.02rem solid #ddd;
	}
	
	
</style>
